<!--
* description: 备件选择
author: hzm
-->
<template>
  <section class="editBigAreaInfo">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="添加备件"
      :append-to-body="true"
      :visible.sync="popupsVisibleTime"
      width="70%"
      @close="closeEdit"
      @open="open"
    >
      <dialogHeader
        slot="title"
        title="添加备件"
        :style-type="$store.state.app.dialogType"
      />
      <one-table-template
        ref="multipleTable"
        :dynamic-buttons="tableButtons"
        :dynamic-components="tableComponents"
        :dynamic-api-config="dynamicApiConfigs"
        :dynamic-table-cols="tableCols"
        :dynamic-form-fields="formField"
        :dynamic-is-show-select="true"
        :dynamic-is-init-table="true"
        :dynamic-table-defult-height="400"
        :dynamic-is-fix-choose="false"
        :dynamic-is-fix-index="false"
        :dynamic-api-style="'restful'"
        :callback-obj="callbackObj"
        :is-show-pagination="true"
      />
      <!-- <div slot="footer" class="dialog-footer">
        <el-button
          v-for="comp in tableButtons"
          :key="comp.compKey"
          :type="comp.type"
          :icon="comp.icon"
          @click="comp.clickEvent"
        >{{ comp.text }}</el-button>
      </div> -->
    </el-dialog>
  </section>
</template>
<script>
import { formMixins } from '@/components/mixins/formMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import Vue from 'vue'
import { orgApis } from '@/api/paSparePartsManagement'

export default {
  components: {
    OneTableTemplate,
    dialogHeader: () => import('@/components/dialogHeader'),
    mixButton: () => import('@/components/basicComponent/mixButton')
  },

  // 组件混入对象
  mixins: [formMixins],

  props: {
    numList: { type: Number, default: 2 },
    wareId: { type: String },
    list: { type: Array },
    popupsVisibleTime: { type: Boolean, default: true },
    // 从网格传入的编辑行数据(json)
    dynamicEditRowData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    chosenList: { type: Array, default: () => ([]) }
  },

  data() {
    const viewPageCode = 'bigAreaInfo-edit'
    return {
      selectionList: null,
      dynamicApiConfigs: orgApis.queryAccessoriesSelection,
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'partNo',
              label: '备件编码',
              align: 'center'
            },
            {
              prop: 'partName',
              label: '备件名称',
              align: 'center'
            },
            // {
            //   prop: 'partStatusName',
            //   label: '备件状态',
            //   align: 'center'
            // },
            // {
            //   prop: 'partAttr',
            //   label: '备件属性',
            //   align: 'center'
            // },
            {
              prop: 'partRepairTypeCn',
              label: '维修类型',
              align: 'center'
            },
            {
              prop: 'carConfigIdList',
              label: '适用车型',
              align: 'center',
              width: 120
            },
            // {
            //   prop: 'carConfigIdList',
            //   label: '实际可用',
            //   align: 'center'
            // },
            {
              prop: 'referencePrice',
              label: '参考价格',
              align: 'center'
            },
            // {
            //   prop: 'unit',
            //   label: '单位',
            //   align: 'center'
            // },
            {
              prop: 'minSalesPage',
              label: '最小销售包装',
              align: 'center'
            },

            {
              prop: 'isRetrospect',
              label: '追溯备件',
              align: 'center'
            },
            {
              prop: 'supplierCode',
              label: '供应商编码',
              align: 'center'
            },
            {
              prop: 'supplierShortName',
              label: '供应商名称',
              align: 'center'
            },
            {
              prop: 'remark',
              label: '备注',
              align: 'center'
            },
            // {
            //   prop: 'carConfigIdList',
            //   label: '适用车型',
            //   align: 'center'
            // }

          ],

      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '备件编码：',
              codeField: 'partNo',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey2',
              labelName: '备件名称：',
              codeField: 'partName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            // {
            //   compKey: 'compKey3',
            //   labelName: '备件状态：',
            //   codeField: 'partStatus',
            //   component: () => import('@/components/org/commonSelect'),
            //   customObj: {
            //     api: orgApis.dropDownDeep
            //     // defOptionFields:['warehouseId','warehouseName']
            //   },
            //   type: 'dropdownList',
            //   isMust: true
            // },
            {
              compKey: 'compKey4',
              labelName: '维修类别：',
              codeField: 'partRepairType',
              component: () => import('@/components/org/commonSelect'),
              type: 'dropdownList',
              customObj: {
                api: orgApis.dropDownKey
              },
              isMust: true
            },
            {
              compKey: 'compKey5',
              labelName: '销售开关：',
              codeField: 'isSale',
              component: () => import('@/components/org/LookupValue'),
              oFields: 'statusId,statusText',
              options: [
                { statusId: '1', statusText: '启用' },
                { statusId: '0', statusText: '停用' }
              ],
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey6',
              labelName: '订货开关：',
              codeField: 'isOrder',
              component: () => import('@/components/org/LookupValue'),
              oFields: 'statusId,statusText',
              options: [
                { statusId: '1', statusText: '启用' },
                { statusId: '0', statusText: '停用' }
              ],
              type: 'dropdownList',
              isMust: true
            },
            {
              compKey: 'compKey7',
              labelName: '供应商：',
              codeField: 'supplierCode',
              component: () =>
                import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey8',
              labelName: '适用车型：',
              codeField: 'carConfigIdList',
              component: () =>
                import('@/components/org/commonInput'),
              type: 'dropdownList',
              isMust: true
            }
          ],
      tableButtons: [
        {
          conmpKey: 'btenKey1',
          type: '',
          size: 'small',
          name: 'search',
          text: this.$t('sys.button.query'),
          clickEvent: () => this.open(),
          position: 'right',
          fuzzySearch: true
        },
        {
          conmpKey: 'btenKey2',
          type: '',
          size: 'small',
          clickEvent: () => this.saveList(),
          text: '确定',
          position: 'right'
        },
        {
          conmpKey: 'btenKey3',
          type: '',
          size: 'small',
          text: '重置',
          clickEvent: () => this.reset(),
          position: 'right'
        }
      ],
      // 标题
      // textMap: {
      //   edit: "价格策略信息编辑",
      //   add: "价格策略信息新增",
      // },

      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(
        this,
        {
          partNo: '',
          partName: '',
          // partStatus: '',
          partRepairType: '',
          isSale: '',
          isOrder: '',
          supplierCode: '',
          carConfigIdList: '',
          warehouseId: ''
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),
      callbackObj: {
        // 手动勾选网格时，拿到勾选网格的数据
        onCheckSelect: (selection, row) => {
          this.selectionList = selection
          console.log(selection, 'selection')
        },
        onCheckSelectAll: (selection) => {
          this.selectionList = selection
        },
        onSelectable: (row) => {
          return !this.chosenList.includes(row['partId'])
        }
      }
    }
  },
  created() {
    this.popupsVisibleTime = false
    console.log(this.numList, 'numlist')
    if (this.numList == 2) {
      this.dynamicApiConfigs = orgApis.queryAccessoriesSelection
    } else if (this.numList == 1) {
      this.dynamicApiConfigs = orgApis.partsSelect
    } else if (this.numList == 3) {
      this.dynamicApiConfigs = orgApis.querySpareParts
    }
  },
  // watch: {
  //   'popupsVisibleTime' : {
  //     handler(val, old) {
  //       if (val) {
  //         this.queryTable(1)
  //       }
  //     },
  //     deep : true,
  //     immediate : true
  //   }
  // },
  methods: {
    // chaxun(){
    //   this.formField.warehouseId = this.wareId
    //   this.$refs['multipleTable'].queryTable(1)
    // },
    open() {
      this.formField.warehouseId = this.wareId
      this.formField.list = this.list
      this.$refs['multipleTable'].queryTable(1)
    },
    // 关闭弹窗
    closeEdit() {
      this.$emit('close', false)
    },
    // 确定
    saveList() {
      this.$emit('list', this.selectionList)
      this.popupsVisibleTime = false
    }
  }
}
</script>

<style lang="scss" scoped>
.promptSpan {
  position: absolute;
  bottom: 26px;
  right: 335px;
  color: #e70020;
}
/deep/ .el-dialog__title {
    border-bottom: 0px !important;
    font: 20px bold !important;
}
</style>

